<link rel="stylesheet" href="__ROOT__/static/plugs/layui/css/layui.css?at={:date('md')}">
<!--<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>-->
{block name="style"}
<style>
    .layui-table, .layui-table-view {
        margin: 5px 0;
    }
</style>
{/block}

{block name="content"}
<button class='layui-btn layui-btn-sm layui-btn-primary' style="margin: 10px 0 0 10px;" onclick="addAttr()">添加属性
</button>
<table class="layui-table" id="demo" lay-filter="test"></table>
<div class="layui-form-item text-center">
    <button class="layui-btn" type="button" onclick="submitData()">保存数据</button>
    <button class="layui-btn layui-btn-danger" type='button' data-confirm="确定要取消编辑吗？" data-close>取消编辑</button>
</div>
<input type="hidden" data-uptype="alioss" name="img_url" data-auto-none>
{/block}
{block name='script'}
<script type="text/html" id="barDemo">
    <button type="button" data-title="上传图片" onclick="set_key({{d.key}})" data-file="btn" data-type="jpg,png,jpeg" data-field="img_url" class="layui-btn layui-btn-danger layui-btn-xs">
        上传图片
    </button>
    &nbsp;
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script type="text/html" id="img_url">
    <img alt="" src="{{d.img_url}}" lay-filter="img_url" data-tips-image class="inline-block text-top margin-right-5" style="width:20px;height:20px">
</script>
<script>
    var table_cols = [[ //标题栏
        {field: 'key', title: 'ID', width: 20},
        {field: 'pro_spec', title: '属性名', minWidth: 60, edit: 'text'},
        {field: 'img_url', title: '产品图片', templet: '#img_url', minWidth: 80},
        {field: 'group_price', title: '拼团价', width: 80, edit: 'text'},
        {field: 'market_price', title: '市场价', width: 80, edit: 'text'},
        {field: 'des', title: '描述', width: 160, edit: 'text'},
        {field: 'stock_num', title: '库存数量', width: 60, edit: 'text'},
        {field: 'score_limit', title: '积分数量限制', width: 60, edit: 'text'},
        {field: 'sort', title: '排序', width: 50, edit: 'text'},
        {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 140}
    ]];
    var table_data = JSON.parse('{$attr_list|raw}');
    var group_id = {$group_id};
    var table;
    layui.use('table', function () {
        table = layui.table;
        //展示已知数据
        table.render({
            elem: '#demo'
            , cols: table_cols
            , data: table_data
        });

        //监听单元格编辑
        table.on('edit(test)', function (obj) {
            table_data[obj.data.key][obj.field] = obj.value;
            console.log('new', table_data);
        });

        //监听行工具事件
        table.on('tool(test)', function (obj) {
            var data = obj.data;
            if (obj.event === 'del') {
                layer.confirm('确定删除么', function (index) {
                    if (data.attr_status == 1) {
                        $.post("{:url('index/attrDel')}", {attr_id: data.attr_id}, function (res) {
                            console.log('attrDel', res);
                            if (res.code == 1) {
                                delAttr(data.key, obj);
                                layer.close(index);
                            } else {
                                layer.msg('删除失败');
                            }
                        });
                    } else {
                        delAttr(data.key, obj);
                        layer.close(index);
                    }
                });
            }
        });
    });

    var item_key = 0;

    function set_key(key) {
        console.log('key', key);
        item_key = key;
    }

    $('[name="img_url"]').on('change', function (value) {
        table_data[item_key]['img_url'] = this.value;
        console.log(item_key);
        console.log(table_data);
        table.render({
            elem: '#demo'
            , cols: table_cols
            , data: table_data
        });
    });

    function delAttr(key, obj) {
        table_data.splice(key, 1);
        obj.del();
        for (let j = 0, len = table_data.length; j < len; j++) {
            table_data[j]['key'] = j;
        }
        console.log('delAttr', table_data);
    }

    function addAttr() {
        console.log(table_data);
        table_data.push({
            attr_id: 0,
            key: table_data.length,
            group_id: group_id,
            pro_spec: '',
            img_url: '',
            group_price: 0,
            market_price: 0,
            des: '',
            stock_num: 0,
            score_limit: 0,
            attr_status: 2,
            sort: 0
        });
        console.log(table_data);
        table.render({
            elem: '#demo'
            , cols: table_cols
            , data: table_data
        });
    }

    var is_ajax_true = false;

    function submitData() {
        if (is_ajax_true) return;
        is_ajax_true = true;
        $.post("{:url('index/attrAdd')}", {group_id: group_id, attr_data: table_data}, function (res) {
            is_ajax_true = false;
            layer.msg(res.info);
        });
    }

</script>
{/block}